<template>
  <div>
    <div class="box">
      <input
        type="text"
        v-model="wendu"
      >
      <div class="bg">
        {{range}}
        <div class="kedu">
          <div
            class="bar"
            :style="{ height: wendu%100 +'%'}"
          ></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      wendu: 0
    }
  },
  computed: {
    range () {
      let arr = []
      let max = this.wendu >= 0 ? (parseInt(this.wendu / 100) + 1) * 100 : (parseInt(this.wendu / 100)) * 100
      let min = this.wendu >= 0 ? (parseInt(this.wendu / 100)) * 100 : (parseInt(this.wendu / 100) - 1) * 100
      for (let i = min; i <= max; i++) {
        if (i % 20 === 0) {
          arr.push(i)
        }
      }
      return arr
    }
  },
  mounted () {
    // setInterval(() => {
    //   this.wendu = Math.random() * 1000 - 500
    //   console.log(this.wendu)
    // }, 1000)
  },
  methods: {

  }
}
</script>

<style>
.box {
  background: #098;
  position: relative;
}

.bg {
  width: 300px;
  height: 300px;
  background: url('../assets/bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.kedu {
  width: 9.1%;
  margin: 0 auto;
  height: 54.7%;
  position: absolute;
  left: 50%;
  bottom: calc(32.5% - 20px);
  -webkit-transform: translateX(-49%);
  transform: translateX(-41%);
  overflow: hidden;
  border-bottom: 20px solid blueviolet;
}
.bar {
  width: 100%;
  background-color: blueviolet;
  position: absolute;
  bottom: 0;
  transition: height 1s;
}
</style>
